<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
  [v-cloak] {
    display: none;
  }
</style>
<!--
  在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签
  cloak：斗篷
  需要和css一起搭配使用
  v-cloak指令用法
  （1）插值表达式存在的问题：“闪动”
  （2）如何解决该问题：使用v-cloak指令
  （3）解决该问题的原理：在vue解析之前，div中有一个属性v-cloak，vue解析后，会自动把v-cloak属性删除（原理），
      所以css中给带v-cloak属性的标签一个none样式，vue解析后没有该属性，样式也没有了，编译后的Mustache值就会显示出来
-->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  },1000)

</script>

</body>
</html>
